<template>
	<view class="coupon">
		<view class="detail-body-coupon">
			<view class="flex">
				<image class="custom-icon goodsDetailCrown" src="@/static/svg/goodsDetailCrown.svg"></image>
				<image class="custom-icon goodsDetailSlogan" src="@/static/svg/goodsDetailSlogan.svg"></image>
			</view>
			<view class="detail-body-coupon-button" @click="open('bottom')">
				领券 >
			</view>
		</view>
		<uni-popup ref="popup" type="bottom"  @change="onchange">
			<view class="page-coupon service-popup">
				<view class="flex-x-center py-1 f-w">服务</view>
				<view class="flex flex-column">
					<view class="coupon-scope">
						平台神券
					</view>
					<block>
						<CouponReceive v-if="bossList.length" :listDatas="bossList" @receiveCoupon:result="receiveCoupon"></CouponReceive>
					</block>
				</view>
				<view class="flex flex-column">
					<view class="coupon-scope">
						商家好券
					</view>
					<block>
						<CouponReceive v-if="tenantList.length" :listDatas="tenantList" @receiveCoupon:result="receiveCoupon"></CouponReceive>
					</block>
					
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	import CouponApi from '@/api/coupon/coupon.js';
	import Constants from '@/constants';
	import CouponReceive from '@/pages/components/coupon/couponReceive.vue';
	const couponStates = {
		'领券中心': CouponApi.usables,
	};
	
	export default {
		data() {
			return {
				serviceShow: false,
				couponList: [],
				bossList: [],
				tenantList: [],
				couponState:'领券中心'
			};
		},
		components:{
			CouponReceive
		},
		mounted(){
				this.initCouponTabResult(this.couponState);
		},
		methods: {
			loadCoupons: async function(apiEndpoint = CouponApi.usables) {
				try {
					const res = await apiEndpoint(this.query, this.param);
					//领券中心和非领券中心字段不一样
					this.bossList = res.obj.data.filter(obj => obj.scope == '1' || obj.couponScope == '1');
					this.tenantList = res.obj.data.filter(obj => obj.scope == '2' || obj.couponScope == '2');
				} catch (error) {
					console.error('【获取优惠券失败】:', error);
				}
			},
			//
			initCouponTabResult(couponState) {
				this.handleCouponTabResult(couponState)
			},
			//
			handleCouponTabResult(couponState) {
				this.couponState = couponState;
				const apiEndpoint = couponStates[couponState];
				if (apiEndpoint) {
					this.loadCoupons(apiEndpoint);
				} else {
					console.error('【无效的优惠券分类】:', couponState);
				}
			},
			//领取优惠券
			receiveCoupon(result) {
				if (result.code == '1') {
					this.$app.toast(result.obj.couponName + '领取成功');
				}else{
					this.$app.toast(result.msg);
				}  
			},
			//
			open(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
				
			},
			//
			close() {
				this.$refs.popup.close();
			},
			onchange(data){
				this.$emit('coupon',data.show);
			}
			
		}
	};
</script>
<style lang="scss" scoped>
	.goodsDetailCrown{
		width: 70rpx;
	}
	.goodsDetailSlogan{
		width: 250rpx;
	}
	.coupon {
		.detail-body-coupon {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-style: normal;
			font-weight: 400;
			color: #FB8C4E;
			background: linear-gradient(92.47deg, #FFEBE4 6.03%, #FFF4CB 98.73%);
			padding: 18rpx 24rpx;
			border-top-left-radius: $xj-standard-border-radius;
			border-top-right-radius: $xj-standard-border-radius;
		
			.detail-body-coupon-button {
				font-size: $uni-font-size-sm;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				padding: 6rpx 14rpx;
				gap: 4px;
				background: linear-gradient(118.17deg, #FEA370 0%, #FE2406 95.01%);
				border-radius: 76px;
				color: $uni-text-color-inverse;
			}
		}
	}
	.service-popup {
		position: relative;
		height: 800rpx;
		font-size: $uni-font-size-base;
		color: $uni-text-color-regular;
		z-index: 100;
		overflow: auto;
		background-color: #F7F7F7;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		//#ifdef MP-WEIXIN
			bottom: -60rpx; 
		//#endif
		.flex{
			margin: 0 20rpx;
		}
		.coupon-scope{
			margin: 20rpx;
			font-weight: 700;
		}
		.flex-x-center{
			border-radius: 16rpx 16rpx 0rpx 0rpx;
			background: #fff;
			text-align: center;
			padding: 20rpx;
		}
	}
</style>